<template>
  <div class="menu">
    <el-menu :default-active="this.$router.path" router :default-openeds="[menuList.index.toString()]" :collapse="isCollapse">
      <el-submenu v-for="(menuItem, idx) of menuList.menu" :key="idx" :index="idx.toString()">
        <template slot="title"><i class="el-icon-location"></i><span slot="title">{{menuItem.name}}</span></template>
        <!-- <router-link :key="subIdx" v-for="(subItem, subIdx) of menuItem.menu" :to="subItem.link"> -->
        <el-menu-item :key="subIdx" v-for="(subItem, subIdx) of menuItem.menu" :index="subItem.link">
          {{subItem.name}}
        </el-menu-item>
        <!-- </router-link> -->
      </el-submenu>
      <el-menu-item @click="isCollapse=!isCollapse">
        <i v-if="isCollapse" class="el-icon-arrow-right"></i>
        <i v-else class="el-icon-arrow-left"></i>
        <span slot="title">收起菜单</span>
      </el-menu-item>
    </el-menu>
  </div>
</template>
<script>
export default {
	name: 'BodyMenu',
	data () {
		return {
			isCollapse:true,
			menuList:{
				index:0,
				menu:[
					{
						name:"name1",
						index:0,
						menu:[
							{
								name:"名称1",
								index:0,
								link:"/"
							},
							{
								name:"名称2",
								index:1,
								link:"/"
							},
							{
								name:"名称3",
								index:2,
								link:"/"
							},
							{
								name:"名称4",
								index:3,
								link:"/"
							}
						]
					},
					{
						name:"name2",
						index:1,
						menu:[
							{
								name:"名称1",
								index:0,
								link:"/about"
							},
							{
								name:"名称2",
								index:1,
								link:"/about"
							},
							{
								name:"名称3",
								index:2,
								link:"/about"
							},
							{
								name:"名称4",
								index:3,
								link:"/about"
							}
						]
					}
				]
			}
		}
	},
	methods: {
		getMenu() {
			this.axios.post('api/menu').then((response)=>{
				if (response.data){
					this.menuList = response.data
				}
			}).catch((response)=>{
				console.log(response);
			})
		}
	},
	mounted() {
		this.getMenu()
	}
}
</script>
<style lang='stylus' scoped>
	.menu
		overflow-y:auto
		overflow-x:hidden
		width:auto
		display:flex
		height:100%
		flex-direction:column
		text-align:left
	.el-menu-item
		height:.4rem
		line-height:.4rem
</style>
